<template>
    <van-nav-bar :class="tclass" :fixed="fixed" :title="title" @click-left="onClickLeft" class="myhead">
        
        <template #right>
            <van-popover v-model="showPopover"  @select="changeactions" placement="bottom-end" theme="dark" trigger="click" :actions="actions">
                <template #reference>
                    <van-icon name="ellipsis" class="hicon" />
                </template>
            </van-popover>
        </template>

        <template #left v-if="back">
            <slot>
               <van-icon name="arrow-left" class="hicon" />
            </slot>
        </template>

    </van-nav-bar>
</template>

<script>
export default {
    props: {
        back: {
            type: Boolean,
            default: true // 默认为true
        }, // 二级详情页才会有返回
        title: String,
        fixed: {
            type: Boolean,
            default: true
        },
        tclass: String
    },
    data () {
        return {
            showPopover: false,
            actions: [
                { text: '登录', icon: 'home-o',name:"login",disabled:this.$route.name=='login' },
                { text: '搜索', icon: 'search' ,name:"search",disabled:this.$route.name=='search' },
                { text: '个人中心', icon: 'user-circle-o',name:'mine',disabled:this.$route.name=='mine'  },
                { text: '反馈', icon: 'more-o' , name: 'question'},
            ],
        }
    },
    methods: {
        changeactions ({ name }) {
            console.log(name)
            if (name != 'logout') {
                this.$router.push({ name })
            } else {

            }
        },
        onClickLeft () {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss">

.myhead {
    z-index: 99;
}

.hicon{
    font-size:20px;
}

.van-icon-ellipsis:before {
    transform: rotate(90deg);
}

.van-popover--dark .van-popover__content {
    z-index: 666;
    margin: 0 -10px;
}

.van-popover[data-popper-placement=bottom-end] .van-popover__arrow {
    right: -1.7px;
}

</style>